<template>
	<div id="curHw">
		<!-- <RealTimeBanner /> -->
		<Banner title="数据分析系统" />

		<div class="container_main">
			<div class="area_Up">
				<div class="button" @click="handleHome()">
					上一级
				</div>
				<div class="left_Row">
					<StableNormal title="当日作业绞车使用率" captionA="作业绞车总数" Type="辆" captionB="使用中" captionC="离线数" :Sum="14" :Amount="10"
					 :Offline="4" />
					<StableUsage id="usage" title="作业小队完井情况" :Sum="14" :Amount="10" />
				</div>
				<div class="mi-row">
					<Ltable title="队号数据" />
				</div>
				<div class="right_Row">
					<StableRight title="完井情况" captionA="总完井数" Type="" captionB="施工中" captionC="施工完成" :Sum="550" :Amount="50" :Offline="500" />
					<StableDepth title="射孔层位" />
				</div>
			</div>
			<div class="area_Bottom">
				<MtableLeft title="每日在线作业小队" />
				<MtableRight title="每日完井作业中油井数量" />
			</div>
		</div>
	</div>
</template>

<script>
	import Banner from "../components/home/Banner.vue";
	// import RealTimeBanner from "../components/realtime/RealTimeBanner.vue";
	import StableDepth from "../components/realtime/StableDepth.vue";
	import StableUsage from "../components/realtime/StableUsage.vue";
	import StableNormal from "../components/realtime/StableNormal.vue";
	import MtableLeft from "../components/realtime/MtableLeft.vue";
	import MtableRight from "../components/realtime/MtableRight.vue";
	import Ltable from "../components/Ltable.vue";
	import StableRight from "../components/realtime/StableRight.vue";

	export default {
		name: "curHw",
		components: {
			Banner,
			// RealTimeBanner,
			StableDepth,
			StableUsage,
			StableNormal,
			MtableLeft,
			MtableRight,
			Ltable,
			StableRight
		},
		data() {
			return {};
		},

		methods: {
			handleHome(val) {
				this.$router.replace("/");
			}
		}
	};
</script>

<style lang="less" scoped>
	body {
		margin: 0;
		padding: 0;
		color: rgb(255, 255, 255);
		background-color: rgb(0, 16, 47);
	}

	#curHw {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 100%;
		height: 100%;
	}

	.container_main {
		width: 100%;
		height: 80%;
		padding: 0 1%;
		box-sizing: border-box;
	}

	.area_Up {
		width: 100%;
		height: 70%;
		margin-bottom: 1%;
		display: flex;
		position: relative;
	}

	.button {
		width: 3.5%;
		height: 7%;
		background-image: url("../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: -10%;
		// left: 0%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #fff;
	}

	.left_Row {
		width: 29%;
		height: 100%;
		margin-right: 1%;
	}

	.mi-row {
		width: 40%;
		margin-right: 1%;
		height: 101%;
	}

	.right_Row {
		width: 29%;
		height: 100%;
	}

	.area_Bottom {
		width: 100%;
		height: 35%;
		display: flex;
	}

	
</style>
